import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { View, Text, Button, Image } from '@tarojs/components';
import { VirtualScroll } from '@repo/virtual-scroll';
import Taro from '../src/adapters/nextjs';
import './list.less';

// 列表项数据类型
interface ListItem {
  id: string;
  title: string;
  description: string;
  imageUrl: string;
  height: number;
}

export default function ListPage() {
  const [items, setItems] = useState<ListItem[]>([]);
  const [loading, setLoading] = useState(false);

  // 生成模拟数据
  const generateItems = (count: number): ListItem[] => {
    return Array.from({ length: count }, (_, index) => ({
      id: `item-${index}`,
      title: `项目 ${index + 1}`,
      description: `这是第 ${index + 1} 个项目的详细描述，包含了一些随机的内容来测试虚拟滚动的效果。`,
      imageUrl: `https://picsum.photos/300/${200 + Math.floor(Math.random() * 200)}?random=${index}`,
      height: 200 + Math.floor(Math.random() * 200), // 随机高度
    }));
  };

  // 初始化数据
  useEffect(() => {
    setItems(generateItems(100));
  }, []);

  // 加载更多数据
  const loadMore = () => {
    setLoading(true);
    setTimeout(() => {
      const newItems = generateItems(20);
      setItems(prev => [...prev, ...newItems]);
      setLoading(false);
    }, 1000);
  };

  // 获取项目ID
  const getItemId = (item: ListItem) => item.id;

  // 计算项目高度
  const calculateHeight = (item: ListItem) => item.height;

  // 渲染列表项
  const renderItem = (item: ListItem) => (
    <View className="list-item">
      <Image
        className="item-image"
        src={item.imageUrl}
        mode="widthFix"
        lazyLoad
      />
      <View className="item-content">
        <Text className="item-title">{item.title}</Text>
        <Text className="item-description">{item.description}</Text>
        <Button
          className="item-button"
          size="mini"
          type="primary"
          onClick={() => Taro.showToast({ title: `点击了 ${item.title}` })}
        >
          查看详情
        </Button>
      </View>
    </View>
  );

  // 处理滚动事件
  const handleScroll = (scrollTop: number) => {
    console.log('滚动位置:', scrollTop);
  };

  // 处理可见项目变化
  const handleVisibleItemsChange = (visibleItems: any[]) => {
    console.log('可见项目数量:', visibleItems.length);
  };

  return (
    <>
      <Head>
        <title>虚拟滚动列表 - Taro + Next.js</title>
        <meta name="description" content="支持瀑布流和动态高度的虚拟滚动列表" />
      </Head>

      <View className="list-page">
        <View className="list-header">
          <Text className="list-title">虚拟滚动列表</Text>
          <Text className="list-subtitle">支持瀑布流和动态高度</Text>
        </View>

        <View className="list-container">
          <VirtualScroll
            items={items}
            height={600}
            estimatedItemHeight={250}
            overscan={5}
            waterfall={true}
            waterfallColumns={2}
            waterfallGap={10}
            getItemId={getItemId}
            renderItem={renderItem}
            calculateHeight={calculateHeight}
            onScroll={handleScroll}
            onVisibleItemsChange={handleVisibleItemsChange}
            className="virtual-scroll-list"
          />
        </View>

        <View className="list-footer">
          <Button
            className="load-more-btn"
            type="primary"
            loading={loading}
            onClick={loadMore}
          >
            {loading ? '加载中...' : '加载更多'}
          </Button>
          <Text className="item-count">共 {items.length} 个项目</Text>
        </View>
      </View>
    </>
  );
}
